<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能家居控制面板 - 全屏监控</title>
    <style>
        /* --- 全局样式 (与之前版本基本相同) --- */
        :root {
            --primary-color: #007bff;
            --primary-hover-color: #0056b3;
            --background-color: #f4f7f9;
            --card-background-color: #ffffff;
            --text-color: #333;
            --border-color: #e0e0e0;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--background-color);
            margin: 0;
            padding: 0;
            color: var(--text-color);
            /* 防止视频页出现滚动条 */
            overflow: auto; 
        }

        /* --- 顶部导航栏 (增加一点高度) --- */
        .navbar {
            background-color: var(--card-background-color);
            box-shadow: var(--shadow);
            padding: 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            height: 60px; /* 固定高度 */
        }

        .nav-button {
            padding: 0 25px;
            height: 100%;
            border: none;
            background-color: transparent;
            color: var(--text-color);
            font-size: 1em;
            cursor: pointer;
            transition: color 0.3s, border-bottom 0.3s;
            border-bottom: 4px solid transparent;
            display: inline-flex;
            align-items: center;
        }
        .nav-button:hover { color: var(--primary-color); }
        .nav-button.active {
            color: var(--primary-color);
            border-bottom: 4px solid var(--primary-color);
            font-weight: bold;
        }

        /* --- 页面容器 --- */
        .container {
            padding: 20px;
            max-width: 900px;
            margin: 20px auto;
        }

        .page {
            display: none;
            animation: fadeIn 0.5s;
        }
        .page.active { display: block; }
        @keyframes fadeIn {
            from { opacity: 0; } to { opacity: 1; }
        }

        /* --- 卡片/模块样式 (与之前版本相同) --- */
        .module {
            background-color: var(--card-background-color);
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 20px;
        }
        .module-title {
            font-size: 1.5em; font-weight: 600; margin-bottom: 20px;
            padding-bottom: 10px; border-bottom: 1px solid var(--border-color);
        }

        /* --- ★★★ 新增：全屏视频页面专属样式 ★★★ --- */
        body.video-mode {
            /* 当进入视频模式时，隐藏主滚动条 */
            overflow: hidden;
        }

        #video.page.active {
            /* 让视频页面容器脱离常规布局，占满整个屏幕 */
            position: fixed;
            top: 60px; /* 导航栏的高度 */
            left: 0;
            width: 100vw;
            height: calc(100vh - 60px); /* 占满剩余的视口高度 */
            background-color: #000;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #video-stream-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        #video-stream-img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain; /* 保持视频流的宽高比 */
            background-color: #111;
        }
        
        #video-status-overlay {
            position: absolute;
            color: white;
            font-size: 1.5em;
            background-color: rgba(0,0,0,0.5);
            padding: 15px 25px;
            border-radius: 8px;
            text-align: center;
        }

        #video-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0,0,0,0.6);
            padding: 10px;
            border-radius: 8px;
            display: flex;
            gap: 15px;
            backdrop-filter: blur(5px);
        }

        /* 隐藏其他页面模块，只保留视频模块 */
        #video .module { display: none; }


        /* --- 其他控件样式 (与之前版本相同，仅微调) --- */
        .control-item, .sensor-data, .status-item { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 1.1em; }
        button { padding: 10px 20px; border: none; background-color: var(--primary-color); color: white; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, box-shadow 0.3s; }
        button:hover { background-color: var(--primary-hover-color); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        .led-indicator { width: 25px; height: 25px; background-color: #e0e0e0; border-radius: 50%; transition: all 0.3s; margin-right: 15px; }
        .led-indicator.on { background-color: var(--success-color); box-shadow: 0 0 10px var(--success-color); }
        .status-indicator { width: 18px; height: 18px; border-radius: 50%; }
        .status-indicator.connected { background-color: var(--success-color); }
        .status-indicator.disconnected { background-color: var(--danger-color); }
        .status-indicator.retrieving { background-color: var(--warning-color); }
        .alarm { padding: 15px; background-color: var(--danger-color); color: white; border-radius: 5px; margin-top: 10px; display: none; text-align: center; }
        #system-status-bar { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 20px; border-radius: 20px; font-size: 0.9em; backdrop-filter: blur(5px); }

    </style>
</head>
<body>

    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <button class="nav-button active" data-page="control">设备控制</button>
        <button class="nav-button" data-page="video">视频监控</button>
        <button class="nav-button" data-page="sensors">传感器数据</button>
        <button class="nav-button" data-page="status">系统状态</button>
    </nav>

    <!-- 页面内容容器 -->
    <div class="container">

        <!-- 页面1: 设备控制 (无变化) -->
        <div id="control" class="page active">
            <!-- ... 内容与上一版相同 ... -->
        </div>

        <!-- ★★★ 页面2: 视频监控 (全新结构) ★★★ -->
        <div id="video" class="page">
            <div id="video-stream-container">
                <!-- 用于显示视频流的img标签 -->
                <img id="video-stream-img" src="" alt="视频流加载区域">
                
                <!-- 视频状态提示 -->
                <div id="video-status-overlay">
                    <div id="video-status-text">未连接</div>
                </div>

                <!-- 视频控制按钮 -->
                <div id="video-controls">
                    <button id="connect-video">连接视频流</button>
                    <button id="disconnect-video">断开连接</button>
                </div>
            </div>
        </div>

        <!-- 页面3: 传感器数据 (无变化) -->
        <div id="sensors" class="page">
            <!-- ... 内容与上一版相同 ... -->
        </div>

        <!-- 页面4: 系统状态 (无变化) -->
        <div id="status" class="page">
            <!-- ... 内容与上一版相同 ... -->
        </div>

    </div>

    <!-- 底部全局状态栏 -->
    <div id="system-status-bar">系统: <span>运行中</span> | 传感器: <span>等待获取...</span></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // --- 页面切换逻辑 ---
    const navButtons = document.querySelectorAll('.nav-button');
    const pages = document.querySelectorAll('.page');
    const body = document.body;

    function showPage(pageId) {
        pages.forEach(page => page.classList.remove('active'));
        navButtons.forEach(button => button.classList.remove('active'));

        document.getElementById(pageId).classList.add('active');
        document.querySelector(`.nav-button[data-page="${pageId}"]`).classList.add('active');

        // ★★★ 如果是视频页面，给body添加特殊类以改变布局 ★★★
        if (pageId === 'video') {
            body.classList.add('video-mode');
            document.querySelector('.container').style.display = 'none'; // 隐藏常规容器
        } else {
            body.classList.remove('video-mode');
            document.querySelector('.container').style.display = 'block'; // 显示常规容器
        }
    }

    navButtons.forEach(button => {
        button.addEventListener('click', () => {
            showPage(button.dataset.page);
        });
    });

    // 默认显示第一个页面
    showPage('control');


    // --- ★★★ 全新的视频流控制逻辑 ★★★ ---
    const videoStreamImg = document.getElementById('video-stream-img');
    const videoStatusText = document.getElementById('video-status-text');
    const videoStatusOverlay = document.getElementById('video-status-overlay');
    const connectBtn = document.getElementById('connect-video');
    const disconnectBtn = document.getElementById('disconnect-video');

    // --- !!! 重要 !!! ---
    // --- 请将下面的URL替换成你自己的视频流地址 ---
    // 常见的格式如: http://<摄像头IP地址>:<端口号>/stream 或 /video
    const MJPEG_STREAM_URL = "http://YOUR_STREAM_IP:PORT/stream"; // 这是一个占位符!

    function connectStream() {
        videoStatusText.textContent = "正在连接...";
        videoStatusOverlay.style.display = 'block';

        // 设置img的src来启动视频流加载
        videoStreamImg.src = MJPEG_STREAM_URL;
    }

    function disconnectStream() {
        // 清空src会停止加载
        videoStreamImg.src = "";
        videoStatusText.textContent = "未连接";
        videoStatusOverlay.style.display = 'block';
    }

    // 当图片流成功加载时触发
    videoStreamImg.onload = function() {
        // 加载成功后，隐藏状态提示
        videoStatusOverlay.style.display = 'none';
    };

    // 当图片流加载失败时触发
    videoStreamImg.onerror = function() {
        // 如果src不为空（意味着我们确实尝试过连接），则显示错误
        if (videoStreamImg.src !== window.location.href) { // 防止初始空src触发错误
             videoStatusText.textContent = "连接失败\n请检查流地址或网络";
             videoStatusOverlay.style.display = 'block';
        }
    };

    connectBtn.addEventListener('click', connectStream);
    disconnectBtn.addEventListener('click', disconnectStream);


    // --- 其他模块的JS代码 (与之前版本相同，这里省略以保持简洁) ---
    // 你需要将上一版代码中关于LED、电机、传感器、报警等功能的JS代码
    // 粘贴到这个位置，它们的功能不受影响。
    // ...
});
</script>

</body>
</html>